<template>
  <view>
    <view class="change" @click="changeContent">
      没找到想要的？赶紧点击这里
      <text class="change-btn">换一批</text>
      <view class="card">
        点击下方卡片可直接复制
      </view>
    </view>
    <waterfall :value="dataList" :scrolltolower="getRecommendLove" ref="child">
      <template v-slot:left="left">
        <view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)">
          <view class="item">
            {{ item.content }}
          </view>
        </view>
      </template>
      <template v-slot:right="right">
        <view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)">
          <view class="item">
            {{ item.content }}
          </view>
        </view>
      </template>
    </waterfall>
  </view>
</template>

<script>
import {
  toRefs,
  reactive,
  onMounted
} from 'vue'
import waterfall from '../../component/waterfall/index.vue'
import api from '../../axios/http.api.js'

export default {
  name: 'content',
  components: {
    waterfall
  },
  setup() {
    const state = reactive({
      dataList: [],
      loading: false,
    })
    const methods = reactive({
      getRecommendLove: async () => {
        state.loading = true
        let res = await api.getRecommendLove()
        state.loading = false
        if (!res || res.code) {
          uni.showToast({
            title: (res && res.msg) || '服务器正在维护中...',
            icon: 'none',
            position: 'top'
          })
          return
        }
        state.dataList = res.data
      },
      copy(item) {
        // 复制话术到剪切板
        uni.setClipboardData({
          data: item.content
        })
        methods.score(item.id)
      },
      // 换一批
      changeContent() {
        this.$refs.child.clear()
        state.dataList = []
        methods.getRecommendLove()
      },
      // 打分
      async score(id) {
        let res = await api.loveScore({
          id
        })
        if (!res || res.code) {
          uni.showToast({
            title: (res && res.msg) || '服务器正在维护中...',
            icon: 'none',
            position: 'top'
          })
        }
      }

    })
    onMounted(() => {
      methods.getRecommendLove()
      // 分享菜单
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })

    })
    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
}
</script>

<style lang="less" scoped>
.change {
  width: 100%;
  height: 18vh;
  border-bottom: 2px #aaaaff solid;
  border-radius: 0 0 50px 50px;
  background-size: 100% 100%;
  opacity: 0.8;
  padding-top: 45px;
  text-align: center;
  font-size: 20px;
  color: #000000;
  background-image: url(../../static/imgs/img4.png);

  .change-btn {
    display: inline-block;
    padding: 2px;
    color: red;
  }

  .card {
    padding-top: 12px;
    font-size: 13px;
  }
}

.left-content {
  margin: 15px 5px 15px 10px;
  padding: 8px;
  border-radius: 6px;
  background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
  font-size: 16px;
  letter-spacing: 5px;

  .item {
    margin-bottom: 10px;
  }
}

.right-content {
  margin: 15px 10px 15px 5px;
  padding: 8px;
  border-radius: 6px;
  background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
  font-size: 16px;
  letter-spacing: 5px;

  .item {
    margin-bottom: 10px;
  }
}
</style>
